<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>案件详情</title>
		<link rel="stylesheet" href="statics/css/bootstrap.min.css" />
		<script type="text/javascript" src="statics/js/bootstrap.min.js"></script>

		<style type="text/css">
			body {
				background: #E7F4FF;
				margin-right: 0rem;
			}
			
			.jd {
				margin: 1rem 0rem;
				padding: 0rem 3rem;
			}
			
			.container {
				background: ghostwhite;
				border-radius: 1rem;
				margin: 1rem 2rem;
				box-shadow: 0rem 0rem 1rem lightblue;
			}
			
			.baoan {
				border-radius: 3rem;
				border: 0.05rem solid #00CED1;
				margin: 1rem 0rem;
				padding-right: 7rem;
			}
			
			.top {
				background: linear-gradient(to right, #5fd6fc, #5ef0c0);
				padding: 1rem 0rem 2rem 0rem;
				margin-right: 0rem;
			}
			
			.main {
				position: absolute;
				top: 10rem;
				margin: 0rem;
				padding: 0rem;
				width: 100%;
			}
			
			.aab {
				height: 2.5em;
				line-height: 2.5em;
				text-align: center;
				color: black;
				font-size: 1.40em;
				margin-bottom: 1.5em;
				border-bottom: 2px solid red;
			}
			
			.aac {
				height: 2.5em;
				line-height: 2.5em;
				text-align: center;
				color: black;
				font-size: 1.40em;
				border-bottom: 2px solid white;
			}
			
			.aaa {
				border-radius: 0.6em;
				/*top: 8em;*/
				background: white;
			}
			/*.aam {
				background: white;
				height: 16em;
			}*/
			
			.jx {
				margin: 0.6em 0.6em 0.6em -1em;
			}
			
			.jxx {
				color: rgb(31, 115, 223);
				margin: 0.2em;
			}
			
			.aak {
				margin-top: 9.5em;
			}
		</style>
	</head>

	<body>
		<!--图片-->
		<div class="top">
			<img src="../statics/img/wzw_img/ajxq.png" class="jd img-responsive" />
		</div>

		<div class="main">

			<!--车辆信息-->
			<div class="container">
				<!---->
				<div class="baoan">
					<p class="h6" style="color: #00CED1;">&nbsp&nbsp&nbsp&nbsp&nbsp报案号:120121199999</p>
				</div>
				<p class="h3">&nbsp&nbsp鄂A12345</p>
				<p class="h6" style="float: right;color: dimgrey;">-----------出险时间：2017-9-27 10:30</p>
			</div>

		</div>

		<div class=" col-xs-12 aak">

			<div class="col-xs-12 aaa">

				<div class="col-xs-6 aab">案件详情</div>

				<div class="col-xs-6 aac">车损照片</div>

				<!--可切换的信息-->
				<!--案件详情-->
				<div class="col-xs-12 bb">

					<div class="col-xs-12   jx">
						事故状况&nbsp<span>这是假数据</span>
					</div>

					<div class="col-xs-12   jx">
						出险车辆&nbsp<span>这是假数据</span>

					</div>

					<div class="col-xs-12 jx">
						出险时间&nbsp<span>这是假数据</span>
					</div>
					<div class="col-xs-12 jx ">
						出险地点&nbsp<span>这是假数据</span>
					</div>
					<div class="col-xs-12 jx ">
						事故类型&nbsp<span>这是假数据</span>
					</div>

					<div class="col-xs-12 jx ">
						驾驶员&nbsp<span>这是假数据</span>

					</div>

					<div class="col-xs-12 jx ">
						赔偿金额&nbsp<span>这是假数据</span>
					</div>
					<!--对方车详情-->
					<div class="col-xs-12 jxx">
						对方车详情
					</div>

					<div class="col-xs-12 jx ">
						驾驶员&nbsp<span>这是假数据</span>
					</div>

					<div class="col-xs-12 jx ">
						出险车辆1&nbsp<span>这是假数据</span>
					</div>

					<div class="col-xs-12  jx ">
						手机号&nbsp<span>这是假数据</span>
					</div>

					<div class="col-xs-12  jx">
						驾驶员&nbsp<span>这是假数据</span>
					</div>

					<div class="col-xs-12 jx">
						出险车辆2&nbsp<span>这是假数据</span>
					</div>

					<div class="col-xs-12 jx ">
						手机号&nbsp<span>这是假数据</span>
					</div>

				</div>

			</div>

		</div>

		<!--车损照片-->
		<div class="col-xs-12 bc">

		</div>

		<script type="text/javascript" src="../statics/js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			$(function() {
				$(".aab").click(function() {
					$(".aab").css("border-bottom", "2px solid red");
					$(".aac").css("border-bottom", "2px solid white");
					$(".bb").show();
					$(".bc").hide();
				});
				$(".aac").click(function() {
					$(".aab").css("border-bottom", "2px solid white");
					$(".aac").css("border-bottom", "2px solid red");
					$(".bc").show();
					$(".bb").hide();
				});
			});
		</script>

	</body>

</html>